<template>
  <view class="container">
    <ve-form ref="formRef" :model="form" :rules="rules">
      <ve-card title="车辆基本信息" type="none" :fold="true" v-model:initFold="carInfoFold">
        <ve-form-item label="车型" required prop="modelId">
          <template v-if="status === 'edit'">
            <text style="color: rgba(205, 206, 208, 1); font-size: 30rpx">{{ modelLabel }}</text>
          </template>
          <template v-else>
            <view class="vehicle-model" @click="openSelectModal">
              <text v-if="modelLabel">{{ modelLabel }}</text>
              <text v-else style="color: #9ea5bb">请选择</text>
            </view>
          </template>
          <ve-icon class="label-icon" name="icon-more" height="23" width="13" />
        </ve-form-item>
        <ve-form-item label="归属门店" required prop="siteId">
          <remote-select
            :multiple="false"
            :type="remoteSelectData.attrs.type"
            v-model="form.siteId"
            v-model:label="remoteSelectData.label"
            :params="{ oldId: form.siteId }"
            @change="changeSiteFn"
          ></remote-select>
        </ve-form-item>
        <ve-form-item prop="source" label="车辆来源" required labelPosition="top" :borderBottom="true">
          <ve-radio class="radio_class" v-model="form.source" :required="true" :list="dict.sourceEnumList" />
        </ve-form-item>
        <view class="page-tit">结算信息</view>
        <view class="type-box">
          <ve-form-item label="是否分期" :borderBottom="true">
            <ve-radio
              :list="dict.useInstallmentList"
              v-model="form.contractCarPurchaseEditVo.useInstallment"
              @confirm="onUseInstallmentChange"
            />
          </ve-form-item>
          <view v-if="[1, 3, 4].includes(form.source)">
            <view v-if="form.contractCarPurchaseEditVo.useInstallment == 1">
              <ve-form-item label="购车日期">
                <template #content>
                  <view style="margin-bottom: 12rpx">购车日期将作为购置税、过户费、运输费、</view>
                  <view style="margin-bottom: 12rpx">保证金、手续费、首付的应付款日；如未填写，</view>
                  <view>上述费用的应付款日取第一期付款日。</view>
                </template>
                <ve-date-picker mode="date" v-model="form.contractCarPurchaseEditVo.purchaseCarDate" />
              </ve-form-item>
              <ve-form-item label="购置税" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.purchaseTax"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.purchaseTaxFlag"
                />
              </ve-form-item>
              <ve-form-item label="首付" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.initialAmount"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.initialAmountFlag"
                />
              </ve-form-item>
              <ve-form-item label="尾款" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.balanceAmount"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.balanceAmountFlag"
                />
              </ve-form-item>
              <ve-form-item label="过户费" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.transferFee"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.transferFeeFlag"
                />
              </ve-form-item>
              <ve-form-item label="运输费" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.transportationFee"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.transportationFeeFlag"
                />
              </ve-form-item>
              <ve-form-item label="保证金" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.earnestMoney"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.earnestMoneyFlag"
                />
              </ve-form-item>
              <ve-form-item label="手续费" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.serviceChargeFee"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.serviceChargeFeeFlag"
                />
              </ve-form-item>
              <ve-form-item prop="contractCarPurchaseEditVo.lnstalmentNum" label="期数" unit="期" required>
                <ve-input-number
                  v-model="form.contractCarPurchaseEditVo.lnstalmentNum"
                  :min="1"
                  :max="99999999"
                  :precision="0"
                  placeholder="请输入"
                />
              </ve-form-item>
              <ve-form-item prop="contractCarPurchaseEditVo.amountPerPeriod" label="每期金额" :unit="unit" required>
                <ve-input-number
                  :min="0.01"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.amountPerPeriod"
                  @change="handleAmountPerPeriodChange"
                  placeholder="请输入"
                />
              </ve-form-item>
              <ve-form-item label="第一期付款日" prop="contractCarPurchaseEditVo.lnstalmentFirstDate" required>
                <ve-date-picker mode="date" v-model="form.contractCarPurchaseEditVo.lnstalmentFirstDate" />
              </ve-form-item>
              <view class="form-operation">
                <div class="all-count">
                  合计：<span class="num">{{ countTotal }}<span class="unit">元</span></span>
                </div>
                <view class="plan-button" @click="viewPaymentPlanFn">
                  <span class="plan-button-text">查看付款计划</span>
                </view>
              </view>
            </view>
            <view v-else>
              <ve-form-item label="购车日期">
                <template #content>
                  <view style="margin-bottom: 12rpx">购车日期将作为购置金额、购置税、过户费、</view>
                  <view style="margin-bottom: 12rpx">运输费、保证金、手续费的应付款日；如未</view>
                  <view>填写，上述费用的应付款日取创建费用的日期。</view>
                </template>
                <ve-date-picker mode="date" v-model="form.contractCarPurchaseEditVo.purchaseCarDate" />
              </ve-form-item>
              <ve-form-item label="购置金额" :unit="unit">
                <ve-input-number
                  :min="0"
                  :max="99999999.99"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.purchaseAmount"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.purchaseAmountFlag"
                />
              </ve-form-item>
              <ve-form-item label="购置税" :unit="unit">
                <ve-input-number
                  :min="0"
                  :max="99999999.99"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.purchaseTax"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.purchaseTaxFlag"
                />
              </ve-form-item>
              <ve-form-item label="过户费" :unit="unit">
                <ve-input-number
                  :min="0"
                  :max="99999999.99"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.transferFee"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.transferFeeFlag"
                />
              </ve-form-item>
              <ve-form-item label="运输费" :unit="unit">
                <ve-input-number
                  :min="0"
                  :max="99999999.99"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.transportationFee"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.transportationFeeFlag"
                />
              </ve-form-item>
              <ve-form-item label="保证金" :unit="unit">
                <ve-input-number
                  :min="0"
                  :max="99999999.99"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.earnestMoney"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.earnestMoneyFlag"
                />
              </ve-form-item>
              <ve-form-item label="手续费" :unit="unit">
                <ve-input-number
                  :min="0"
                  :max="99999999.99"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.serviceChargeFee"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.serviceChargeFeeFlag"
                />
              </ve-form-item>
            </view>
          </view>
          <view v-else>
            <view v-if="form.contractCarPurchaseEditVo.useInstallment == 1">
              <ve-form-item label="借入日期">
                <template #content>
                  <view style="margin-bottom: 12rpx">借入日期将作为首付的应付款日，</view>
                  <view>如未填写，首付的应付款日取第一期付款日。</view>
                </template>
                <ve-date-picker mode="date" v-model="form.contractCarPurchaseEditVo.purchaseCarDate" />
              </ve-form-item>
              <ve-form-item label="首付" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.initialAmount"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.initialAmountFlag"
                />
              </ve-form-item>
              <ve-form-item label="尾款" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.balanceAmount"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.balanceAmountFlag"
                />
              </ve-form-item>
              <ve-form-item prop="contractCarPurchaseEditVo.lnstalmentNum" label="期数" unit="期" required>
                <ve-input-number
                  v-model="form.contractCarPurchaseEditVo.lnstalmentNum"
                  :min="1"
                  :max="99999999"
                  :precision="0"
                  placeholder="请输入"
                />
              </ve-form-item>
              <ve-form-item prop="contractCarPurchaseEditVo.amountPerPeriod" label="每期金额" :unit="unit" required>
                <ve-input-number
                  :min="0.01"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.amountPerPeriod"
                  @change="handleAmountPerPeriodChange"
                  placeholder="请输入"
                />
              </ve-form-item>
              <ve-form-item label="第一期付款日" prop="contractCarPurchaseEditVo.lnstalmentFirstDate" required>
                <ve-date-picker mode="date" v-model="form.contractCarPurchaseEditVo.lnstalmentFirstDate" />
              </ve-form-item>
              <view class="form-operation">
                <div class="all-count">
                  合计：<span class="num">{{ countTotal }}<span class="unit">元</span></span>
                </div>
                <view class="plan-button" @click="viewPaymentPlanFn">
                  <span class="plan-button-text">查看付款计划</span>
                </view>
              </view>
            </view>
            <view v-else>
              <ve-form-item label="借入日期">
                <template #content>
                  <view style="margin-bottom: 12rpx">借入日期将作为借调费（借入）的应付款日，</view>
                  <view style="margin-bottom: 12rpx">如未填写，借调费（借入）的应付款日</view>
                  <view>取生成费用的日期。</view>
                </template>
                <ve-date-picker mode="date" v-model="form.contractCarPurchaseEditVo.purchaseCarDate" />
              </ve-form-item>
              <ve-form-item label="借调费" :unit="unit">
                <ve-input-number
                  :min="0"
                  :precision="2"
                  v-model="form.contractCarPurchaseEditVo.purchaseAmount"
                  placeholder="请输入"
                  :disabled="form.contractCarPurchaseEditVo.purchaseAmountFlag"
                />
              </ve-form-item>
            </view>
          </view>
        </view>

        <view class="page-tit">合同信息</view>
        <view class="type-box">
          <ve-form-item label="合同编号" prop="contractCarPurchaseEditVo.contractNo">
            <ve-input v-model="form.contractCarPurchaseEditVo.contractNo" placeholder="请输入" />
          </ve-form-item>
          <ve-form-item label="合同开始日期" prop="contractCarPurchaseEditVo.contractSignDate">
            <ve-date-picker mode="date" v-model="form.contractCarPurchaseEditVo.contractSignDate"></ve-date-picker>
          </ve-form-item>
          <ve-form-item label="合同结束日期" prop="contractCarPurchaseEditVo.contractEndDate">
            <ve-date-picker mode="date" v-model="form.contractCarPurchaseEditVo.contractEndDate"></ve-date-picker>
          </ve-form-item>
          <ve-form-item label="借调同行" v-if="form.source == 2">
            <remote-select
              :multiple="false"
              :type="remoteSelectPeer.attrs.type"
              v-model="form.contractCarPurchaseEditVo.supplierId"
              v-model:label="remoteSelectPeer.label"
              @change="onSelectPeerChange"
              :params="{
                oldId: form.contractCarPurchaseEditVo.supplierId,
              }"
            />
          </ve-form-item>
          <ve-form-item label="汽车销售" v-else>
            <remote-select
              :multiple="false"
              :type="remoteSelectSupplier.attrs.type"
              v-model="form.contractCarPurchaseEditVo.supplierId"
              v-model:label="remoteSelectSupplier.label"
              :params="{
                id: form.contractCarPurchaseEditVo.supplierId,
              }"
              @change="onSelectSupplierChange"
            ></remote-select>
          </ve-form-item>
          <ve-form-item label="收款账号">
            <ve-input v-model="form.contractCarPurchaseEditVo.receiveAccount" :maxlength="30" />
          </ve-form-item>
          <view class="stage-box">
            <ve-form-item label="合同附件" :borderBottom="true">
              <UploadFile
                v-model:fileId="form.contractCarPurchaseEditVo.contractFileId"
                :fileTypes="fileTypes"
                @change="getFileObj"
                :fileIndex="1"
              />
            </ve-form-item>
          </view>
        </view>
        <ve-form-item label="车辆颜色">
          <ve-input v-model="form.carColor" placeholder="请输入" :maxlength="10" />
        </ve-form-item>
        <ve-form-item label="GPS设备" :borderBottom="false">
          <remote-select
            :multiple="false"
            :type="remoteSelectVehicle.attrs.type"
            :config="remoteSelectVehicle.config"
            v-model="form.vehicleIdList"
            v-model:label="remoteSelectVehicle.label"
            :params="{
              idList: form.vehicleIdList ? form.vehicleIdList : undefined,
            }"
            @change="onSelectvehicleIdListChange"
          >
          </remote-select>
        </ve-form-item>
      </ve-card>

      <ve-card title="行驶证信息" type="none" :fold="true" v-model:initFold="driveInfoFold">
        <ve-form-item label="上传行驶证" labelPosition="top" valuePosition="left" :borderBottom="false">
          <view class="drive-license">
            <view class="upload-item">
              <ve-upload
                v-model="form.frontOfDrivingIds"
                uploadText="上传行驶证正页"
                maxSize="15728640"
                max-count="1"
                @on-success="uploadFrontDriveSuccess"
                @on-list-change="uploadFrontDriveListChange"
                :once="uploadOnce"
              >
              </ve-upload>
              <!-- 图片识别 -->
              <OcrButton
                v-if="form.frontOfDrivingIds?.length"
                ocrType="drivingLicenseFront"
                :fileId="form.frontOfDrivingIds[0]"
                @success="ocrFrontDrive"
              />
            </view>
            <view class="upload-item">
              <ve-upload
                v-model="form.reverseOfDrivingIds"
                uploadText="上传行驶证副页"
                maxSize="15728640"
                max-count="1"
                @on-success="uploadBackDriveSuccess"
                @on-list-change="uploadBackDriveListChange"
                :once="uploadOnce"
              >
              </ve-upload>
              <!-- 图片识别 -->
              <OcrButton
                v-if="form.reverseOfDrivingIds?.length"
                ocrType="drivingLicenseBack"
                :fileId="form.reverseOfDrivingIds[0]"
                @success="ocrBackDrive"
              />
            </view>
            <view class="upload-item">
              <ve-upload v-model="form.frontPhotoIds" uploadText="上传车头照(含车牌号)" maxSize="15728640" max-count="1"> </ve-upload>
            </view>
          </view>
        </ve-form-item>
        <ve-form-item prop="licenseNo" label="车牌号" required>
          <input v-model="form.licenseNo" placeholder="请输入" :maxlength="10" @blur="onChangeLicenseNo('licenseNo')" @input="clearInput" />
          <view class="clear-wrap" v-if="form.licenseNo.length > 0">
            <ve-icon name="icon-clear" size="32" @click="clearIcon" />
          </view>
        </ve-form-item>
        <ve-form-item prop="vin" label="车架号-车辆识别代码" required>
          <input v-model="form.vin" placeholder="请输入" :maxlength="30" @blur="editCarVinFn" />
        </ve-form-item>
        <ve-form-item label="车牌颜色">
          <template #footer>
            <div style="color: rgb(239, 68, 68); font-size: 13px">注意：请选择车牌颜色！不是车身颜色</div>
          </template>
          <ve-picker-inline
            v-model="form.licenseNoColor"
            placeholder="请选择"
            :range="dict.licenseNoColorList"
            unit="arrowRight"
            @change="onChangeLicenseNo('licenseNoColor')"
          />
        </ve-form-item>
        <ve-form-item label="发动机号">
          <ve-input v-model="form.engineNum" placeholder="请输入" :maxlength="30" />
        </ve-form-item>
        <ve-form-item label="品牌车型">
          <ve-input v-model="form.brandModel" placeholder="请输入" />
        </ve-form-item>
        <!-- <ve-form-item label="车辆类型">
          <ve-input v-model="form.engineNum" placeholder="请输入" :maxlength="30" />
        </ve-form-item> -->
        <ve-form-item label="注册日期">
          <ve-date-picker mode="date" v-model="form.registerDate" />
        </ve-form-item>
        <ve-form-item label="发证日期">
          <ve-date-picker mode="date" v-model="form.issuanceDate" />
        </ve-form-item>
        <ve-form-item label="行驶证所属人姓名">
          <ve-input v-model="form.driveNatureOwner" placeholder="请输入" :maxlength="50" />
        </ve-form-item>
        <ve-form-item label="住址">
          <ve-input v-model="form.drivingAddress" placeholder="请输入" :maxlength="99" />
        </ve-form-item>
        <ve-form-item label="使用性质">
          <ve-input v-model="form.driverUseNature" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="外廓尺寸">
          <ve-input-number v-model="form.length" placeholder="车长" />
          <view class="x">X</view>
          <ve-input-number v-model="form.width" placeholder="车宽" />
          <view class="x">X</view>
          <ve-input-number v-model="form.height" placeholder="车高" />
        </ve-form-item>
        <ve-form-item label="核定载人数">
          <ve-input-number v-model="form.ac" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="总质量" unit="kg">
          <ve-input-number v-model="form.grossMass" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="整备质量" unit="kg">
          <ve-input-number v-model="form.unladenMass" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="车辆类型">
          <view class="vehicle-type" @click="openAddSelectorModal">
            <ve-input :allowClear="false" :customStyle="{ pointerEvents: 'none' }" v-model="form.driverCarType" placeholder="请选择" />
            <ve-icon name="arrow_right_0" size="32" />
          </view>
        </ve-form-item>
      </ve-card>

      <template v-if="status === 'new'">
        <ve-card title="年检证信息" type="none" :fold="true" v-model:initFold="inspectionFold">
          <ve-alert style="margin-bottom: 16rpx">
            1、年检证建议上传12123电子年检证。支持的格式：JPG、JPEG、PNG、WEBP；
            <br />
            2.此处上传的年检证仅做暂时保存，后续会根据最新上传的覆盖掉。如果需要长久留存，可通过【新增年检】功能上传年检证。
          </ve-alert>
          <ve-form-item label="上传年检证" labelPosition="top" prop="inspectionFileId">
            <view>
              <ve-upload v-model="form.inspectionFileId" single max-count="1"></ve-upload>
              <OcrButton v-if="form.inspectionFileId" ocrType="inspection" :fileId="form.inspectionFileId" @success="inspectionOCR_Ok" />
            </view>
          </ve-form-item>
          <ve-form-item label="年检有效期至" prop="planTime" :borderBottom="false">
            <ve-date-picker v-model="form.planTime" mode="date" allowClear :disabled="form.existInspection === 1" />
          </ve-form-item>
        </ve-card>
        <ve-card
          :customContentStyle="{
            paddingBottom: '32rpx',
          }"
          title="交强保险单"
          type="none"
          :fold="true"
          v-model:initFold="compulsoryFold"
        >
          <Compulsory
            title="交强险保险单"
            addBtnText="新增交强保险单"
            insureType="compulsory"
            :feeList="form.compulsory"
            :remoteSelectData="remoteSelectCompulsory"
            @handleAdd="handleCompulsoryAdd"
            @handleDelete="handleCompulsoryDelete"
          />
        </ve-card>
        <ve-card title="商业保险单" type="none" :fold="true" v-model:initFold="businessFold">
          <Compulsory
            title="商业险保险单"
            addBtnText="新增商业保险单"
            insureType="business"
            :feeList="form.business"
            :remoteSelectData="remoteSelectCompulsory"
            @handleAdd="handleBusinessAdd"
            @handleDelete="handleCompulsoryDelete"
          />
        </ve-card>
      </template>

      <ve-card
        :customContentStyle="{
          paddingBottom: '32rpx',
        }"
        v-if="status === 'edit'"
        title="运维信息"
        type="none"
        :fold="true"
        v-model:initFold="OperationFold"
      >
        <ve-alert style="margin-bottom: 16rpx">
          此处上传的年检证、保单仅做暂时保存，后续会根据最新上传的覆盖掉。如果需要长久留存，可通过【新增年检】【新增保单】功能上传凭证。
        </ve-alert>
        <ve-card title="年检证" type="default" class="inspection-wrapper">
          <ve-form-item label="上传年检证" labelPosition="top" valuePosition="left" :borderBottom="false">
            <view>
              <ve-upload ref="inspectionUploadOcrRef" v-model="form.inspectionFileId" single max-count="1"></ve-upload>
              <OcrButton v-if="form.inspectionFileId" ocrType="inspection" :fileId="form.inspectionFileId" @success="inspectionOCR_Ok" />
            </view>
          </ve-form-item>
          <ve-form-item label="年检有效期至">
            <ve-date-picker mode="date" allowClear v-model="form.planTime"></ve-date-picker>
          </ve-form-item>
          <view class="plan-button maintenance-button" @click="handleOperationAddFn('inspect')">
            <ve-icon name="plus" size="30"></ve-icon>
            <span class="plan-button-text">新增年检</span>
          </view>
        </ve-card>

        <ve-card title="商业保险单" type="default" class="inspection-wrapper">
          <ve-form-item label="上传文件">
            <uploadFile v-model:fileId="form.businessFileId" :fileTypes="['pdf']" :fileIndex="1"></uploadFile>
          </ve-form-item>
          <ve-form-item label="商业险到期日">
            <ve-date-picker mode="date" allowClear v-model="form.businessEndDate"></ve-date-picker>
          </ve-form-item>
          <view class="plan-button maintenance-button" @click="handleOperationAddFn('insure', 1)">
            <ve-icon name="plus" size="30"></ve-icon>
            <span class="plan-button-text">新增保单</span>
          </view>
        </ve-card>

        <ve-card title="交强保险单" type="default" class="inspection-wrapper">
          <ve-form-item label="上传文件">
            <uploadFile v-model:fileId="form.compulsoryFileId" :fileTypes="['pdf']" :fileIndex="2"></uploadFile>
          </ve-form-item>
          <ve-form-item label="交强险到期日">
            <ve-date-picker mode="date" allowClear v-model="form.compulsoryEndDate"></ve-date-picker>
          </ve-form-item>
          <view class="plan-button maintenance-button" @click="handleOperationAddFn('insure', 0)">
            <ve-icon name="plus" size="30"></ve-icon>
            <span class="plan-button-text">新增保单</span>
          </view>
        </ve-card>

        <ve-card class="inspection-wrapper">
          <ve-form-item label="车辆当前行驶里程" unit="公里">
            <ve-input-number v-model="form.totalMileage" :precision="0" placeholder="请输入" />
          </ve-form-item>
          <ve-form-item label="下次保养里程" unit="公里">
            <ve-input-number v-model="form.estimatedKilometre" :precision="0" placeholder="请输入" />
          </ve-form-item>
          <view class="plan-button" @click="handleOperationAddFn('maintenance')">
            <ve-icon name="plus" size="30"></ve-icon>
            <span class="plan-button-text">新增保养</span>
          </view>
          <ve-form-item label="下次保养日期" :borderBottom="false">
            <ve-date-picker mode="date" allowClear v-model="form.estimatedTime"></ve-date-picker>
          </ve-form-item>
        </ve-card>
      </ve-card>

      <ve-card
        v-if="status === 'edit' && supplierDetails.config?.tboxEnabled === 1"
        title="车载BOX设备信息"
        type="none"
        :fold="true"
        v-model:initFold="TBOXInfoFold"
      >
        <ve-form-item label="设备状态">
          <ve-picker-inline
            disabled
            v-model="form.tboxEquipmentStatus"
            placeholder="请选择"
            :range="dict.tboxEquipmentStatusList"
            unit="arrowRight"
          />
        </ve-form-item>
        <ve-form-item label="车载BOX车辆当前公里数" unit="公里">
          <ve-input-number disabled v-model="form.tboxCurrentMileage" :precision="0" placeholder="0.00" />
        </ve-form-item>
        <ve-form-item label="车载BOX车辆当前油(电)量">
          <ve-input-number disabled v-model="form.tboxCurrentOil" :precision="0" :min="1" :max="99999" placeholder="0" />
        </ve-form-item>
        <ve-form-item label="设备供应商">
          <ve-input disabled v-model="form.tboxVehicleFirm" placeholder="请输入" />
        </ve-form-item>
      </ve-card>

      <ve-card
        v-if="status === 'edit' && (supplierDetails.config?.hrhcEtcEnabled === 1 || supplierDetails.config?.quantumEtcEnabled == 1)"
        title="ETC设备信息"
        type="none"
        :fold="true"
        v-model:initFold="ETCInfoFold"
      >
        <template #status>
          <ve-tag class="card__status" :color="getEtcCorlor(form)" v-if="form.etcSourceName" :title="form.etcSourceName"></ve-tag>
        </template>
        <ve-form-item label="设备是否激活">
          <ve-input disabled v-model="form.etcEquipmentActivationName" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="ETC设备号">
          <ve-input disabled v-model="form.etcEquipmentNo" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="ETC卡号">
          <ve-input disabled v-model="form.etcCardNo" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="设备是否在线">
          <ve-input disabled v-model="form.etcEquipmentOnLineName" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="硬件连接状态">
          <ve-input disabled v-model="form.etcHardwareStatusName" placeholder="请输入" />
        </ve-form-item>
        <ve-form-item label="设备工作状态">
          <ve-picker-inline disabled v-model="form.etcWorkStatus" placeholder="请选择" :range="dict.etcWorkStatusList" unit="arrowRight" />
        </ve-form-item>
      </ve-card>
    </ve-form>

    <ve-bottom-box size="mini">
      <ve-button type="primary" size="long" :loading="loading" @click="handleConfirm">确认</ve-button>
    </ve-bottom-box>
  </view>

  <ve-confirm v-model="confirmVisible" titleText="提示" cancelText="关闭" :showCancel="false" @confirm="onConfirm">
    当前车牌号在归还车辆中已存在，请前往pc端网页版的归还车辆操作再次借入
  </ve-confirm>
</template>
<script setup lang="ts">
  import UploadFile from '@/components/upload-file/index.vue'
  import { ref, provide, watch, nextTick, computed } from 'vue'
  import { onLoad, onBackPress } from '@dcloudio/uni-app'
  import { scroll2el } from '@/utils/scroll2el'
  import useToast from '@/hooks/useToast'
  import { usePageDict } from '@/hooks/useDict'
  import { modifyCar, saveCarModel, getCarDetail, checkLicenseNo, checkReturnCar } from '@/api/asset/car-manager'
  import { getPurchaseFeeDetail } from '@/api/asset/asset-fee'
  import dayjs from 'dayjs'
  import { getEnterpriseDetail } from '@/api/common'
  import OcrButton from '@/components/ocr-button.vue'
  import Compulsory from '../components/compulsory.vue'
  import { isMobile } from '@/utils/validate'
  import { isValid } from '@/utils'

  const confirmVisible = ref(false)
  const uploadOnce = ref(false)
  const fileTypes = ref<any>(['pdf', 'doc', 'docx'])
  const status = ref('new')
  const modelLabel = ref('')
  const selectorModal = ref()
  const addSelectorModal = ref()
  const unit = ref('元')
  const dict = usePageDict('carManagerToListDict')
  // 年检ocr识别
  const inspectionOCR_Ok = (res) => {
    if (res?.date) {
      useToast({
        title: '读取成功',
      })
      form.value.planTime = dayjs(res.date).endOf('month').format('YYYY-MM-DD')
    }
  }

  const openAddSelectorModal = () => {
    uni.navigateTo({
      url: '/pages/asset/car-manager/choose-vehicle-type',
      events: {
        onConfirm: (val) => {
          form.value.driverCarType = val
        },
      },
    })
  }

  const handleOperationAddFn = (type: any, insureKind: number) => {
    switch (type) {
      // 跳转保养
      case 'maintenance':
        uni.navigateTo({
          url: `/pages/asset/car-maintenance/form?pageType=create&carId=${form.value.id}&origin=home`,
        })
        break
      // 保险
      case 'insure':
        uni.navigateTo({
          url: `/pages/asset/car-insure/form?insureKind=${insureKind}&carId=${form.value.id}`,
        })
        break
      // 年检
      case 'inspect':
        uni.navigateTo({
          url: '/pages/asset/car-inspect/form?carId=' + form.value.id,
        })
        break
    }
  }

  const options = ref()
  let originDetail = ref<any>({})
  provide('originDetail', originDetail)
  const viewPaymentPlanFn = () => {
    let contractInfo = form.value.contractCarPurchaseEditVo || {}
    let { amountPerPeriod, lnstalmentNum, lnstalmentFirstDate, contractSignDate, contractEndDate } = contractInfo
    // 定义字段和对应的名称
    const requiredFields = [
      { value: amountPerPeriod, name: '每期金额' },
      { value: lnstalmentNum, name: '期数' },
      { value: lnstalmentFirstDate, name: '第一期付款日' },
    ]
    if (!amountPerPeriod) {
      formRef.value.validateField('contractCarPurchaseEditVo.amountPerPeriod')
    }
    if (!lnstalmentNum) {
      formRef.value.validateField('contractCarPurchaseEditVo.lnstalmentNum')
    }
    if (!lnstalmentFirstDate) {
      formRef.value.validateField('contractCarPurchaseEditVo.lnstalmentFirstDate')
    }
    // 找到未填写的字段名称
    const missingFields = requiredFields.filter((field) => !field.value).map((field) => field.name)

    if (missingFields.length > 0) {
      uni.showToast({
        title: `请先填写${missingFields.join('、')}字段！`,
        icon: 'none',
        duration: 2000,
      })
    } else {
      setTimeout(() => {
        let param = {}
        if ([1, 3, 4].includes(form.value.source)) {
          param = {
            purchaseTax: contractInfo.purchaseTax, //购置税
            initialAmount: contractInfo.initialAmount, //首付
            balanceAmount: contractInfo.balanceAmount, //尾款
            transferFee: contractInfo.transferFee, //过户费
            transportationFee: contractInfo.transportationFee, //运输费
            earnestMoney: contractInfo.earnestMoney, //保证金
            serviceChargeFee: contractInfo.serviceChargeFee, //手续费
            lnstalmentNum,
            lnstalmentAmount: amountPerPeriod,
            lnstalmentFirstDate,
            contractSignDate,
            contractEndDate,
            carSource: form.value.source,
            purchaseCarDate: contractInfo.purchaseCarDate, //购车、借入日期
          }
        } else {
          param = {
            initialAmount: contractInfo.initialAmount, //首付
            balanceAmount: contractInfo.balanceAmount, //尾款
            lnstalmentNum,
            lnstalmentAmount: amountPerPeriod,
            lnstalmentFirstDate,
            contractSignDate,
            contractEndDate,
            carSource: form.value.source,
            purchaseCarDate: contractInfo.purchaseCarDate, //购车、借入日期
          }
        }
        param.contractStatus = contractInfo.id ? 'edit' : 'new'
        param.id = contractInfo.id || ''
        param.businesCode = contractInfo.purchaseNo || ''
        uni.$emit('viewContractInfoNoId', param)
      }, 100)
      uni.navigateTo({ url: '/pages/asset/car-manager/form/components/bill-plan' })
    }
  }

  // 截获左滑右滑
  onBackPress(() => {
    // 选择车型弹窗可见与否
    let selectorModalVisible = selectorModal.value?.modalVisible
    // 新增车型弹窗可见与否
    let addSelectorModalVisible = addSelectorModal.value?.modalVisible
    if (selectorModalVisible || addSelectorModalVisible) {
      if (addSelectorModalVisible) {
        addSelectorModal.value.modalVisible = false
      } else if (selectorModalVisible) {
        selectorModal.value.modalVisible = false
      }
      return true
    }
  })
  // 分期金额变化
  // 分期金额变化是否触发，默认是 true，当切换分期是否或者切换来源之后更改为 false
  const watchAmountPerPeriodChangeFlag = ref(true)
  // 上次输入的金额
  const lastInputValue = ref('')
  const handleAmountPerPeriodChange = (value: string) => {
    if (form.value.id && watchAmountPerPeriodChangeFlag.value) {
      // 上次输入的值
      const lastValue = lastInputValue.value || originDetail.value.contractCarPurchaseEditVo.amountPerPeriod
      // 和初始值不一样，触发校验
      if (value != lastValue) {
        uni.showModal({
          content: '修改每期金额后，将同步更新付款计划中所有未付款和已驳回的分期部分的金额。请确认是否修改？',
          cancelText: '取消',
          confirmText: '确认',
          success: (res) => {
            if (res.confirm) {
              // 记录本次输入的金额
              lastInputValue.value = form.value.contractCarPurchaseEditVo.amountPerPeriod
            } else {
              // 初始值
              const originValue = originDetail.value.contractCarPurchaseEditVo.amountPerPeriod
              // 存在上次输入价格，则回退成上次输入价格，否则回退成初始值
              form.value.contractCarPurchaseEditVo.amountPerPeriod = lastInputValue.value || originValue
            }
          },
        })
      }
    } else {
      console.log('修改为初始值')
      // 记录本次输入的金额
      lastInputValue.value = value
    }
  }

  const cloneForm = ref<any>({})
  const form = ref<any>({
    source: 1, // 车辆来源
    contractCarPurchaseEditVo: {
      useInstallment: 0, // 合同是否分期
      lnstalmentNum: '', // 期数
      initialAmount: '', // 首付金额
      balanceAmount: '', // 最后一期付款金额
    },
    licenseNo: '', // 车牌号
    vin: '', // 车架号
    compulsory: [],
    // 商业险列表 insureKind 固定 1
    business: [],
  })
  provide('form', form.value)

  const rules: any = computed(() => {
    const _rules: any = {}
    _rules['licenseNo'] = {
      required: true,
      message: '请输入',
    }
    _rules['modelId'] = {
      required: true,
      message: '请选择',
    }
    _rules['siteId'] = {
      required: true,
      message: '请选择',
    }
    _rules['source'] = {
      required: true,
      message: '请选择',
    }
    _rules['contractCarPurchaseEditVo.lnstalmentNum'] = {
      required: true,
      message: '请输入',
    }
    _rules['contractCarPurchaseEditVo.amountPerPeriod'] = {
      required: true,
      message: '请输入',
    }
    _rules['contractCarPurchaseEditVo.lnstalmentFirstDate'] = {
      required: true,
      message: '请输入',
    }
    _rules['contractCarPurchaseEditVo.contractNo'] = {
      pattern: /^[a-zA-Z0-9]{0,30}$/,
      message: '支持填写数字及字母，最多30位',
    }
    _rules['vin'] = {
      required: true,
      message: '请输入',
    }

    // 交强险|商业险 必填逻辑
    form.value.compulsory.forEach((item: any, index: number) => {
      _rules[`compulsory.${index}.siteId`] = {
        required: true,
        message: '请选择保险单关联门店',
      }
      _rules[`compulsory.${index}.insureCompany`] = {
        required: true,
        message: '请选择保险公司',
      }
      _rules[`compulsory.${index}.experiencedPhone`] = {
        required: false,
        validator: (_: any, value: any, callback: any) => {
          if (value) {
            if (isMobile(value)) {
              callback()
            } else {
              callback(new Error('支持输入11位数字'))
            }
          } else {
            callback()
          }
        },
      }
      _rules[`compulsory.${index}.lifeSpan`] = {
        required: true,
        validator: (_: any, value: any, callback: any) => {
          const compulsoryItem = form.value.compulsory[index]
          if (compulsoryItem.beginDate && compulsoryItem.endDate) {
            callback()
          } else {
            callback(new Error('请选择有效期'))
          }
        },
      }
    })
    form.value.business.forEach((item: any, index: number) => {
      _rules[`business.${index}.siteId`] = {
        required: true,
        message: '请选择保险单关联门店',
      }
      _rules[`business.${index}.insureCompany`] = {
        required: true,
        message: '请选择保险公司',
      }
      _rules[`business.${index}.experiencedPhone`] = {
        required: false,
        validator: (_: any, value: any, callback: any) => {
          if (value) {
            if (isMobile(value)) {
              callback()
            } else {
              callback(new Error('支持输入11位数字'))
            }
          } else {
            callback()
          }
        },
      }
      _rules[`business.${index}.lifeSpan`] = {
        required: true,
        validator: (rule: any, value: any, callback: any) => {
          const businessItem = form.value.business[index]
          if (businessItem.beginDate && businessItem.endDate) {
            callback()
          } else {
            callback(new Error('请选择有效期'))
          }
        },
      }
    })

    return _rules
  })

  // 归属门店
  const remoteSelectData = {
    prop: 'siteId',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'site',
    },
  }

  // 借调同行
  const remoteSelectPeer = {
    prop: 'supplierId',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'peerAll',
    },
  }

  // 汽车销售
  const remoteSelectSupplier = {
    prop: 'supplierId',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'carModelSale',
    },
  }

  // 车机设备
  const remoteSelectVehicle = {
    prop: 'vehicleIdList',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'carDevice',
    },
  }
  const remoteSelectCompulsory = ref({
    prop: 'insureCompany',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'supplierInsure',
    },
  })

  // 选择车型
  const openSelectModal = () => {
    // 跳转选择页面
    uni.navigateTo({
      url: '/pages/utils/selector',
      events: {
        selectorConfirm: (value: any, label: any, option: any) => {
          console.log(value, label, option, '1 value, label, option')
          modelLabel.value = label
          form.value.modelId = value
          form.value.tenantModelId = option.tenantModelId
        },
        operationClick: () => {
          uni.navigateTo({
            url: '/pages/utils/selector',
            events: {
              selectorConfirm: (value: any, label: any, option: any) => {
                console.log(value, label, option, '2 value, label, option')
                saveCarModel({ modelId: value, modelName: label })
                  .then((res: any) => {
                    console.log(res, 'reonSecondModalChanges')
                    form.value.modelId = res.result.modelId
                    modelLabel.value = res.result.modelName
                    form.value.tenantModelId = res.result.tenantModelId
                    uni.navigateBack()
                  })
                  .catch((error: any) => {
                    console.log(error)
                    uni.showToast({
                      title: error.data.message,
                      icon: 'none',
                    })
                  })
              },
            },
            success: (res) => {
              // 传递数据
              res.eventChannel.emit('selectorInit', {
                type: 'carGarage',
                value: '',
                multiple: false,
              })
            },
          })
        },
      },
      success: (res) => {
        // 传递数据
        res.eventChannel.emit('selectorInit', {
          type: 'carModel',
          value: form.value.modelId,
          multiple: false,
          operation: true,
          params: { oldId: form.value.modelId },
        })
      },
    })
  }

  // 归属门店选择
  const changeSiteFn = (val: any, option: any) => {
    console.log(val, option, 'val, option')
    const { siteCarPark } = option
    form.value.libraryName = siteCarPark
  }

  // 上传合同
  const getFileObj = (e: any) => {
    console.log('文件file: ', e)
  }

  // 切换车辆来源重置合同信息校验
  const onSourceChangeClearValidate = () => {
    onUseInstallmentChange({ value: 1 })
  }
  // 合计
  const countTotal = ref<any>(0)
  const initCount = (num: any) => {
    return Number(num) || 0
  }

  // 是否分期
  const onUseInstallmentChange = (item: any) => {
    if (useInstallmentFeeStatus.value) {
      uni.showModal({
        title: '提示',
        content: '存在已结算的费用，需将所有已付款or已收款的流水驳回，才能进行切换。',
        showCancel: false,
        confirmText: '我已知晓',
        success: (res) => {
          form.value.contractCarPurchaseEditVo.useInstallment = originDetail.value.contractCarPurchaseEditVo.useInstallment
        },
      })
    } else {
      formRef.value.clearValidate()
      delete rules.value['contractCarPurchaseEditVo.lnstalmentNum'] // 期数
      delete rules.value['contractCarPurchaseEditVo.amountPerPeriod'] // 每期金额
      delete rules.value['contractCarPurchaseEditVo.lnstalmentFirstDate'] // 第一期付款日

      if (item.value === 1) {
        rules.value['contractCarPurchaseEditVo.lnstalmentNum'] = {
          required: true,
          message: '请输入',
        }
        rules.value['contractCarPurchaseEditVo.amountPerPeriod'] = {
          required: true,
          message: '请输入',
        }
        rules.value['contractCarPurchaseEditVo.lnstalmentFirstDate'] = {
          required: true,
          message: '请输入',
        }
      }
      if (form.value.contractCarPurchaseEditVo.useInstallment !== 1) {
        // 首付 + 尾款+ 每期金额*期数
        if (
          form.value.contractCarPurchaseEditVo.initialAmount ||
          form.value.contractCarPurchaseEditVo.balanceAmount ||
          (form.value.contractCarPurchaseEditVo.amountPerPeriod && form.value.contractCarPurchaseEditVo.lnstalmentNum)
        ) {
          //购置金额
          form.value.contractCarPurchaseEditVo.purchaseAmount =
            initCount(form.value.contractCarPurchaseEditVo.initialAmount) +
            initCount(form.value.contractCarPurchaseEditVo.balanceAmount) +
            initCount(form.value.contractCarPurchaseEditVo.lnstalmentNum) * initCount(form.value.contractCarPurchaseEditVo.amountPerPeriod)
        }
      }
      form.value.contractCarPurchaseEditVo.initialAmount = null
      form.value.contractCarPurchaseEditVo.balanceAmount = null
      form.value.contractCarPurchaseEditVo.lnstalmentNum = null
      form.value.contractCarPurchaseEditVo.amountPerPeriod = null
      form.value.contractCarPurchaseEditVo.lnstalmentFirstDate = null
      if (form.value.contractCarPurchaseEditVo.useInstallment == 1) {
        form.value.contractCarPurchaseEditVo.purchaseAmount = null
      }
      // 每期金额变化监听开关关闭
      watchAmountPerPeriodChangeFlag.value = false
    }
  }
  // 是否是已付款账单
  const isPaid = ref(false)
  const renderAllCount = (isStatus: string | undefined) => {
    const {
      lnstalmentNum,
      amountPerPeriod,
      purchaseTax,
      initialAmount,
      balanceAmount,
      transportationFee,
      transferFee,
      earnestMoney,
      serviceChargeFee,
    } = form.value.contractCarPurchaseEditVo
    if ([1, 3, 4].includes(form.value.source)) {
      //合计 = 购置税 + 首付 + 尾款+ 过户费 + 运输费 + 保证金 + 手续费 + 每期金额*期数
      countTotal.value =
        initCount(purchaseTax) +
        initCount(initialAmount) +
        initCount(balanceAmount) +
        initCount(transferFee) +
        initCount(transportationFee) +
        initCount(earnestMoney) +
        initCount(serviceChargeFee)
    } else {
      // 合计 = 首付 + 尾款+ 每期金额*期数
      countTotal.value = initCount(initialAmount) + initCount(balanceAmount)
    }
    if (isPaid.value) {
      // 过滤出 feeStatus 为 1 的条目，表示已支付的部分
      const paidItems = isPaidObj.value.filter((item: { feeStatus: number }) => item.feeStatus === 1)
      // 已支付期数
      const paidCount = paidItems.length
      // 已支付总金额
      const paidTotal = paidItems.reduce((sum: any, item: { totalAmount: any }) => sum + (item.totalAmount || 0), 0)
      // 未支付期数
      const unpaidCount = lnstalmentNum - paidCount
      // 未支付总金额
      let unpaidTotal = 0
      if (isStatus) {
        const unPaidItems = isPaidObj.value.filter((item: { feeStatus: number }) => item.feeStatus === 0)
        // 未支付总金额
        unpaidTotal = unPaidItems.reduce((sum: any, item: { totalAmount: any }) => sum + (item.totalAmount || 0), 0)
      } else {
        unpaidTotal = Math.abs(unpaidCount) * (amountPerPeriod || 0)
      }
      // 总金额
      const totalAmount = paidTotal + unpaidTotal
      countTotal.value = (countTotal.value + totalAmount).toFixed(2)
    } else {
      countTotal.value = (countTotal.value + initCount(lnstalmentNum) * initCount(amountPerPeriod)).toFixed(2)
    }
  }
  watch(
    () => form.value.contractCarPurchaseEditVo,
    () => {
      renderAllCount()
    },
    { immediate: true, deep: true },
  )

  const formRef = ref()
  const carInfoFold = ref(true)
  const driveInfoFold = ref(false)
  const OperationFold = ref(false)
  const TBOXInfoFold = ref(false)
  const ETCInfoFold = ref(false)
  const inspectionFold = ref(false)
  const compulsoryFold = ref(false)
  const businessFold = ref(false)

  const loading = ref(false)
  const handleConfirm = () => {
    loading.value = true
    formRef.value.validate(async (valid: boolean, errors: any) => {
      if (valid) {
        const contractStartDate =
          form.value.contractCarPurchaseEditVo.contractSignDate && dayjs(form.value.contractCarPurchaseEditVo.contractSignDate)
        const contractEndDate =
          form.value.contractCarPurchaseEditVo.contractEndDate && dayjs(form.value.contractCarPurchaseEditVo.contractEndDate)

        if (contractStartDate && contractEndDate) {
          if (contractStartDate.isAfter(contractEndDate)) {
            uni.showToast({
              title: '合同结束日期不能早于合同开始日期',
              icon: 'none',
            })
            return
          }
        }
        // loading.value = false
        driveInfoFold.value = false
        OperationFold.value = false
        carInfoFold.value = false
        inspectionFold.value = false
        compulsoryFold.value = false
        businessFold.value = false
        form.value.business.forEach((item: any) => {
          item.initFold = false
        })
        if (form.value.source == 2 && cloneForm.value.licenseNo !== form.value.licenseNo) {
          try {
            const _ = await checkLicenseNo({ licenseNo: form.value.licenseNo, vin: form.value.vin, carInfoId: form.value.id })

            const { code, result } = await checkReturnCar({ licenseNo: form.value.licenseNo, modelId: form.value.modelId })
            console.log('checkReturnCar', code, result)
            if (code == '200') {
              if (!result) {
                navigatorAdd()
              } else {
                confirmVisible.value = true
                loading.value = false
              }
            } else {
              loading.value = false
            }
          } catch (error) {
            console.log('error', error)
            loading.value = false
          }
        } else {
          navigatorAdd()
        }
      } else {
        loading.value = false
        errors.forEach((item: any) => {
          if (item.field === 'licenseNo' || item.field === 'vin') {
            driveInfoFold.value = true
          } else {
            carInfoFold.value = true
          }
          console.log('验证失败', errors)
          scroll2el('.ve-form-item__body__right__message')
        })
      }
    })
  }
  const navigatorAdd = () => {
    if (status.value == 'new') {
      // 处理保险 start
      let compulsory = form.value.compulsory
      // 商业险处理投保信息 （底部金额表格信息）
      let business = JSON.parse(JSON.stringify(form.value.business))
      business.forEach((item: any) => {
        let carInsureDetail = item.carInsureDetail
        if (carInsureDetail.length > 0) {
          item.carInsureDetail = item.carInsureDetail.filter((item: any) => {
            return item.insureKindType !== '' || item.insuredSum !== '' || item.insureAmt !== ''
          })
        }
      })
      form.value.carInsuranceList = [...compulsory, ...business]
    } else {
      uploadOnce.value = true
    }

    if (form.value.frontOfDrivingIds) {
      form.value.driveImgFrontFileId = form.value.frontOfDrivingIds[0]
    }

    if (form.value.reverseOfDrivingIds) {
      form.value.driveImgBackFileId = form.value.reverseOfDrivingIds[0]
    }

    if (form.value.inspectionFileId && Array.isArray(form.value.inspectionFileId)) {
      form.value.inspectionFileId = form.value.inspectionFileId.join(',')
    }

    if (form.value.frontPhotoIds) {
      form.value.carHeadFileId = form.value.frontPhotoIds[0]
    }

    console.log(form.value, 'form.value')

    modifyCar(form.value)
      .then((res: any) => {
        uni.$emit('getList', true)
        if (status.value === 'edit' && options.value.from === 'detail') {
          uni.$emit('carDetail_refresh')
        }
        uni.navigateBack()
        uni.showToast({
          title: res.message,
          icon: 'none',
        })
      })
      .catch((error) => {
        console.log(error)
        uploadOnce.value = false
        uni.showToast({
          title: error.data.message,
          icon: 'none',
        })
      })
      .finally(() => {
        loading.value = false
      })
  }

  // 车机设备
  const onSelectvehicleIdListChange = (value: number, option: any) => {
    console.log(value, option, 'onSelectvehicleIdListChange')
    form.value.vehicleIdList = value ? [value] : []
    remoteSelectVehicle.label = option.vehicleSelectStr
  }

  const frontDriveConfig = ref<any>({})
  // 上传行驶证正面
  const uploadFrontDriveSuccess = (res: any) => {
    const result = res.result[0]
    frontDriveConfig.value = result
  }

  const uploadFrontDriveListChange = (res: any) => {
    if (res.length === 0) {
      return
    }
    frontDriveConfig.value = { ...frontDriveConfig.value, openUrl: res[0].url }
  }

  // 行驶证正面需要识别出来的字段
  const ocrFrontList = ['plateNum', 'vin', 'engineNum', 'model', 'registerDate', 'issueDate', 'owner', 'useCharacter']
  // OCR识别行驶证正面
  const ocrFrontDrive = (result) => {
    const isAllOCR = ocrFrontList.every((key) => result[key])
    if (!isAllOCR) {
      uni.showToast({
        title: '未全部识别，行驶证正面图片可能不够清晰',
        icon: 'none',
      })
    } else {
      uni.showToast({
        title: '图片识别完毕',
        icon: 'none',
      })
    }
    form.value.licenseNo = form.value.licenseNo || result.plateNum // 车牌号
    form.value.vin = form.value.vin || result.vin // 车架号
    form.value.engineNum = form.value.engineNum || result.engineNum // 发动机号
    form.value.brandModel = form.value.brandModel || result.model // 品牌车型
    form.value.registerDate = form.value.registerDate || result.registerDate // 注册日期
    form.value.issuanceDate = form.value.issuanceDate || result.issueDate // 发证日期
    form.value.driveNatureOwner = form.value.driveNatureOwner || result.owner // 行驶证所属人姓名
    form.value.driverUseNature = form.value.driverUseNature || result.useCharacter // 使用性质
    form.value.drivingAddress = form.value.drivingAddress || result.address // 住址
  }

  const backDriveConfig = ref<any>({})
  // 上传行驶证副页
  const uploadBackDriveSuccess = (res: any) => {
    const result = res.result[0]
    backDriveConfig.value = result
  }

  const uploadBackDriveListChange = (res: any) => {
    if (res.length === 0) {
      return
    }
    backDriveConfig.value = { ...backDriveConfig.value, openUrl: res[0].url }
  }

  // 行驶证副页需要识别的字段
  const ocrBackList = [
    'overallDimension.length',
    'overallDimension.width',
    'overallDimension.height',
    'appprovedPassengerCapacity',
    'grossMass',
    'unladenMass',
  ]
  // ocr识别行驶证反面
  const ocrBackDrive = (result: any) => {
    const getValue = (obj: any, path: string) => {
      const keys = path.split('.')
      let value = obj

      for (const key of keys) {
        if (!value[key]) {
          return undefined
        }
        value = value[key]
      }

      return value
    }

    for (let key in result) {
      if (key === 'grossMass') {
        result[key] = result[key]?.split('kg')[0]
      }
      if (key === 'unladenMass') {
        result[key] = result[key]?.split('kg')[0]
      }
    }

    const values = ocrBackList.map((path) => getValue(result, path)).filter((value) => value !== undefined)
    if (values.length !== ocrBackList.length) {
      uni.showToast({
        title: '未全部识别，行驶证反面图片可能不够清晰',
        icon: 'none',
      })
    } else {
      uni.showToast({
        title: '图片识别完毕',
        icon: 'none',
      })
    }

    form.value.length = form.value.length || result.overallDimension.length // 外廓尺寸
    form.value.width = form.value.width || result.overallDimension.width // 外廓尺寸
    form.value.height = form.value.height || result.overallDimension.height // 外廓尺寸
    form.value.ac = form.value.ac || result.appprovedPassengerCapacity // 核定载人数
    form.value.grossMass = form.value.grossMass || result.grossMass // 总质量
    form.value.unladenMass = form.value.unladenMass || result.unladenMass // 整备质量
  }

  let key = 0
  const handleCompulsoryAdd = () => {
    form.value.compulsory.push({
      insureKind: 0,
      key: key++,
      siteId: form.value.siteId || '',
      siteName: remoteSelectData.label || '',
    })
  }

  const handleCompulsoryDelete = (e: any) => {
    form.value.compulsory.splice(e, 1)
  }

  const handleBusinessAdd = () => {
    form.value.business.push({
      insureKind: 1,
      initFold: true,
      siteId: form.value.siteId || '',
      siteName: remoteSelectData.label || '',
      carInsureDetail: [
        {
          insureAmt: '',
          insureKindType: '',
          insuredSum: '',
        },
      ],
    })
  }

  // 商业保险单
  const handleBusinessDelete = (e: any) => {
    uni.showModal({
      title: '提示',
      content: '是否删除该条商业险信息？',
      success: (res) => {
        if (res.confirm) {
          form.value.business.splice(e, 1)
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      },
    })
  }

  // 借调同行/汽车销售
  const onSelectSupplierChange = (val: any, option: any) => {
    console.log(val, option)
    form.value.contractCarPurchaseEditVo.supplierId = val
    remoteSelectSupplier.label = option.supplierName
  }

  const onSelectPeerChange = (val: any, option: any) => {
    console.log(val, option)
    form.value.contractCarPurchaseEditVo.supplierId = val
    remoteSelectPeer.label = option.industryName
  }

  const supplierDetails = ref<any>({})
  // 获取商户信息
  const getSupplierInfo = () => {
    getEnterpriseDetail()
      .then((res: any) => {
        const result = res.result
        supplierDetails.value = result
      })
      .catch((error) => {
        console.log(error)
      })
  }

  const onConfirm = () => {
    confirmVisible.value = false
  }

  // 费用是否已付款
  const isPaidBorrowFee = ref(false)
  const isPaidObj = ref()
  const useInstallmentFeeStatus = ref(false)
  onLoad((option: any) => {
    options.value = option
    console.log('1 option', option, options.value)

    if (option.id) {
      status.value = 'edit'
      uni.setNavigationBarTitle({
        title: '编辑车辆',
      })

      getSupplierInfo()
      getCarDetail({ id: option.id }).then((res) => {
        console.log(res, 'res')
        const result: any = res.result
        originDetail.value = JSON.parse(JSON.stringify(result))
        result.frontOfDrivingIds = result.driveImgFrontFileId ? [result.driveImgFrontFileId] : []
        result.reverseOfDrivingIds = result.driveImgBackFileId ? [result.driveImgBackFileId] : []
        result.frontPhotoIds = result.carHeadFileId ? [result.carHeadFileId] : []
        result.etcEquipmentNo = result.etcEquipmentNo || '无设备'
        result.etcCardNo = result.etcCardNo || '无设备'
        modelLabel.value = result.modelName
        remoteSelectData.label = result.siteName
        remoteSelectSupplier.label = result.contractCarPurchaseEditVo?.supplierName
        remoteSelectPeer.label = result.contractCarPurchaseEditVo?.supplierName

        form.value = { ...form.value, ...result }
        cloneForm.value = JSON.parse(JSON.stringify(form.value))
        console.log(form.value, 'form.value')
      })
    }
    if (status.value === 'edit') {
      watch(
        () => originDetail.value,
        (newVal) => {
          if (newVal && Object.keys(newVal).length > 0) {
            console.log('watch originDetail', newVal, form.value.contractCarPurchaseEditVo)
            if (form.value.contractCarPurchaseEditVo.id) {
              getPurchaseFeeDetail({ carId: option.id, feeCategoryList: [0, 5, 6] }).then((res: any) => {
                const result = res.result
                isPaidObj.value = result.carAssetFeeList?.filter(
                  (item: { createNode: number; payableNum: number }) => item.createNode !== 4 && item.payableNum > 0,
                )
                isPaidBorrowFee.value = isPaidObj.value.some((item: { feeStatus: number }) => {
                  return item.feeStatus == 1
                })
                isPaid.value = isPaidBorrowFee.value
                useInstallmentFeeStatus.value = result.carAssetFeeList.some((item: { feeStatus: number }) => {
                  return item.feeStatus == 1
                })
                renderAllCount('isPaid')
              })
              // 开启 source 监听
              startWatchSource()
            }
          }
        },
      )
    } else {
      // 开启 source 监听
      startWatchSource()
    }
    // 监听年检、保险、保养回调函数
    car_edit_callback()
  })

  const showClearIcon = ref(false)
  const clearInput = (event: any) => {
    form.value.licenseNo = event.detail.value
    if (event.detail.value.length > 0) {
      showClearIcon.value = true
    } else {
      showClearIcon.value = false
    }
  }

  const clearIcon = () => {
    form.value.licenseNo = ''
    showClearIcon.value = false
  }

  // 修改车架号
  let flagVin = ref(true)
  const editCarVinFn = () => {
    if (status.value == 'edit') {
      let { vin, licenseNo, etcEquipmentActivation } = originDetail.value
      let modalContent = ref('')
      if (etcEquipmentActivation == 1 && supplierDetails.value.config.quantumEtcEnabled == 1 && vin != form.value.vin && flagVin.value) {
        // vin
        modalContent.value = `原车牌${licenseNo}下有ETC，改车架号需重新激活etc，仍然坚持修改吗？`
      }
      if (modalContent.value) {
        uni.showModal({
          title: '提示',
          content: modalContent.value,
          success: (res) => {
            if (res.confirm) {
              // 清除信息
              flagVin.value = false
            } else if (res.cancel) {
              form.value.vin = vin
            }
          },
        })
      }
    }
  }

  const onChangeLicenseNoAndLicenseNoColor = (type: string) => {
    // 有ETC和TBOX且TOBX不是未设备ETC激活
    if (
      supplierDetails.value.config.tboxEnabled === 1 &&
      supplierDetails.value.config.hrhcEtcEnabled === 1 &&
      supplierDetails.value.config.quantumEtcEnabled === 1 &&
      form.value.tboxEquipmentStatus !== -1 &&
      form.value.etcEquipmentActivation == 1
    ) {
      uni.showModal({
        title: '提示',
        content: `原车牌号${cloneForm.value.licenseNo}下有ETC和车载BOX, ${
          type === 'licenseNo' ? '改车牌' : '改车牌颜色'
        }需重新激活或安装设备, 仍然坚持修改吗?`,
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            form.value.tboxEquipmentStatus = -1
            form.value.totalMileage = 0
            form.value.tboxCurrentOil = 0
            form.value.etcEquipmentActivationName = '无设备'
            form.value.etcEquipmentNo = '无设备'
            form.value.etcCardNo = '无设备'
            form.value.etcEquipmentOnLineName = '无设备'
            form.value.etcHardwareStatusName = '无设备'
            form.value.etcWorkStatus = -1
          } else if (res.cancel) {
            console.log('用户点击取消')
            if (type === 'licenseNo') {
              form.value.licenseNo = cloneForm.value.licenseNo
            } else {
              form.value.licenseNoColor = cloneForm.value.licenseNoColor
            }
          }
        },
      })
    }

    // 有TBOX
    else if (supplierDetails.value.config.tboxEnabled === 1 && form.value.tboxEquipmentStatus !== -1) {
      uni.showModal({
        title: '提示',
        content: `原车牌号${cloneForm.value.licenseNo}下有车载BOX, ${
          type === 'licenseNo' ? '改车牌' : '改车牌颜色'
        }需重新安装车载BOX, 仍然坚持修改吗?`,
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            form.value.tboxEquipmentStatus = -1
            form.value.totalMileage = 0
            form.value.tboxCurrentOil = 0
          } else if (res.cancel) {
            console.log('用户点击取消')
            if (type === 'licenseNo') {
              form.value.licenseNo = cloneForm.value.licenseNo
            } else {
              form.value.licenseNoColor = cloneForm.value.licenseNoColor
            }
          }
        },
      })
    }

    // 有ETC
    else if (
      form.value.etcEquipmentActivation == 1 &&
      (supplierDetails.value.config.hrhcEtcEnabled == 1 || supplierDetails.value.config.quantumEtcEnabled == 1)
    ) {
      uni.showModal({
        title: '提示',
        content: `原车牌号${cloneForm.value.licenseNo}下有ETC, ${
          type === 'licenseNo' ? '改车牌' : '改车牌颜色'
        }需重新安装ETC, 仍然坚持修改吗?`,
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            form.value.etcEquipmentActivationName = '无设备'
            form.value.etcEquipmentNo = '无设备'
            form.value.etcCardNo = '无设备'
            form.value.etcEquipmentOnLineName = '无设备'
            form.value.etcHardwareStatusName = '无设备'
            form.value.etcWorkStatus = -1
          } else if (res.cancel) {
            console.log('用户点击取消')
            if (type === 'licenseNo') {
              form.value.licenseNo = cloneForm.value.licenseNo
            } else {
              form.value.licenseNoColor = cloneForm.value.licenseNoColor
            }
          }
        },
      })
    }
  }

  // 修改车牌和车牌颜色
  const onChangeLicenseNo = (val: string) => {
    if (status.value === 'new') {
      return
    }

    if (val === 'licenseNo' && cloneForm.value.licenseNo !== form.value.licenseNo) {
      onChangeLicenseNoAndLicenseNoColor(val)
    }

    if (val === 'licenseNoColor' && cloneForm.value.licenseNoColor !== form.value.licenseNoColor) {
      onChangeLicenseNoAndLicenseNoColor(val)
    }
  }
  const getEtcCorlor = (item) => {
    switch (Number(item.etcSource)) {
      case 1:
        return 'orange'
      case 2:
        return 'blue'
      default:
        return 'blue'
    }
  }

  const sourceConfig: any = {}
  // 监听 source
  const startWatchSource = () => {
    const watchInstance = watch(
      () => form.value.source,
      (newVal, oldVal) => {
        renderAllCount()
        console.log(newVal, oldVal, 'source')
        if (status.value == 'new' || newVal === oldVal) {
          return
        }
        new Promise<void>((resolve, reject) => {
          if (status.value == 'edit') {
            if (isPaid.value) {
              uni.showModal({
                title: '提示',
                content: '车辆来源变更，则已确认的费用及流水状态变更为已作废，是否确认变更来源？',
                success: (res) => {
                  if (res.confirm) {
                    onSourceChangeClearValidate()
                    resolve()
                  } else if (res.cancel) {
                    reject()
                  }
                },
              })
            } else {
              uni.showModal({
                title: '提示',
                content: '车辆来源变更，原付款计划将自动删除，是否确认变更来源？',
                success: (res) => {
                  if (res.confirm) {
                    onSourceChangeClearValidate()
                    resolve()
                  } else if (res.cancel) {
                    reject()
                  }
                },
              })
            }
          } else {
            resolve()
          }
        })
          .then(() => {
            if (status.value === 'edit') {
              watchAmountPerPeriodChangeFlag.value = false
              useInstallmentFeeStatus.value = false
              if (newVal !== originDetail.value.source) {
                isPaid.value = false
              } else {
                isPaid.value = isPaidBorrowFee.value
              }
              // 缓存
              if (oldVal) {
                console.log(sourceConfig[oldVal], 'sourceConfig: oldVal')
                sourceConfig[oldVal] = JSON.stringify(form.value.contractCarPurchaseEditVo)
              }
              if (sourceConfig[newVal]) {
                console.log(sourceConfig[newVal], 'sourceConfig: newVal')
                let temp = JSON.parse(sourceConfig[newVal])
                form.value.contractCarPurchaseEditVo = {
                  ...temp,
                }
              } else {
                form.value.contractCarPurchaseEditVo = {
                  useInstallment: 0, // 合同是否分期
                  lnstalmentNum: '',
                  initialAmount: '',
                  balanceAmount: '',
                }
              }
              console.log(sourceConfig, 'sourceConfig')
            }
          })
          .catch(() => {
            form.value.source = oldVal
            // 移除监听
            watchInstance()
            // 重新开启监听
            nextTick(() => {
              startWatchSource()
            })
          })
      },
    )
  }
  const inspectionUploadOcrRef = ref()
  // 车辆编辑中监听保险、年检、保养新增操作
  const car_edit_callback = () => {
    // 新增保险监听回调函数
    uni.$on('carEdit_insureAddOk', (param = {}) => {
      if (param?.insureAddList?.length) {
        let { endDate, insureKind, policyImgFileId } = param.insureAddList[0]
        // 交强险
        if (insureKind == 0) {
          // 如果页面上已存在交强险到期日，则校验保单的到期日是否早于车辆上的交强险到期日，如果早则跳过
          if (form.value.compulsoryEndDate && dayjs(endDate).isBefore(form.value.compulsoryEndDate)) {
            return
          }
          form.value.compulsoryEndDate = endDate
          form.value.compulsoryFileId = policyImgFileId
        }
        // 商业险
        if (insureKind == 1) {
          // 如果页面上已存在商业险到期日，则校验保单的到期日是否早于车辆上的商业险到期日，如果早则跳过
          if (form.value.businessEndDate && dayjs(endDate).isBefore(form.value.businessEndDate)) {
            return
          }
          form.value.businessEndDate = endDate
          form.value.businessFileId = policyImgFileId
        }
      }
    })
    // 新增年检监听回调函数
    uni.$on('carEdit_inspectAddOk', (param = {}) => {
      console.log('🐳 ~ uni.$on ~ carEdit_inspectAddOk:')
      if (param.planTime) {
        if (form.value.planTime && dayjs(param.planTime).isBefore(form.value.planTime)) {
          return
        }
        form.value.planTime = param.planTime
        console.log(param)
        nextTick(() => {
          inspectionUploadOcrRef.value && inspectionUploadOcrRef.value.update(param.inspectionFileId)
        })
      }
    })
    // 新增保养监听回调函数
    uni.$on('carEdit_maintenanceAddOk', (param = {}) => {
      // 本次保养里程单独比较，如果大于车辆上本次保养里程，则更新到车辆编辑页面，否则不更新
      if (isValid(param.entranceKilometre)) {
        // 如果新增弹窗有值且页面上有值，则比较大小，如果弹窗内小，则不做处理
        if (isValid(form.value.totalMileage) && param.entranceKilometre < form.value.totalMileage) {
          return
        }
        form.value.totalMileage = param.entranceKilometre
      }
      // 1 比较下次保养里程是否比页面上的大，下次保养里程必填
      let isKilometreBiggerThanFormValue = true
      // 如果页面有值
      if (isValid(form.value.estimatedKilometre)) {
        // 并且新增的值比页面上的小
        if (param.estimatedKilometre < form.value.estimatedKilometre) {
          isKilometreBiggerThanFormValue = false
        }
      }
      // 比页面大，直接更新下次保养里程和下次保养日期
      if (isKilometreBiggerThanFormValue) {
        form.value.estimatedKilometre = param.estimatedKilometre
        form.value.estimatedTime = param.estimatedTime
      } else {
        // 2 比页面小，则比对下次保养日期
        if (isValid(param.estimatedTime)) {
          // 如果新增弹窗有值且页面上有值，则比较大小，如果弹窗内小，则不做处理
          if (isValid(form.value.estimatedTime) && dayjs(param.estimatedTime).isBefore(form.value.estimatedTime)) {
            return
          }
          form.value.estimatedTime = param.estimatedTime
        }
      }
    })
  }
</script>
<style scoped lang="less">
  .maintenance-button {
    margin-bottom: 32rpx;
  }
  .card__status {
    margin-left: 16rpx;
  }
  .vehicle-type {
    display: flex;
    align-items: center;
  }

  :deep(.list-item) {
    margin-right: 0;
    margin-bottom: 0;
  }
  .x {
    margin: 0 16rpx;
  }
  .label-box {
    display: flex;
    align-items: flex-end;
  }
  .desc {
    color: rgba(158, 165, 187, 1);
    font-size: 24rpx;
  }
  .drive-license {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .upload-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      .ocr-button {
        width: 100%;
        margin-top: 20rpx;
      }
    }
  }
  .ve-bottom-box {
    height: 132rpx;
  }

  .ve-card:last-child {
    margin-bottom: 0;
  }
  .container {
    height: auto;
    padding: 24rpx 24rpx 40rpx; //ios
    background-color: #f7f8fa;
  }

  :deep(.radio .title) {
    margin-right: 16rpx;
  }

  .error-item {
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    font-weight: 400;
    color: #f53f3f;
    line-height: 44rpx;
  }

  .label-icon {
    flex-shrink: 0;
    margin-left: 16rpx;
  }

  .vehicle-model {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    text-align: right;
    font-size: 30rpx;
    font-weight: 400;
    color: #191c27;
    line-height: 44rpx;

    .ve-svg-icon {
      margin-left: 24rpx;
    }
  }
  .type-box {
    flex: 1;
    padding: 0 24rpx;
    background-color: rgba(247, 248, 250, 1);
  }

  .stage-box {
    background-color: rgba(247, 248, 250, 1);
  }
  .page-tit {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #191c27;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding: 32rpx 0 12rpx 0;
  }
  .form-operation {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 32rpx 0;
    .all-count {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #1e1e1e;
      text-align: right;
      font-style: normal;
      text-transform: none;
      width: 100%;
      margin-bottom: 32rpx;
      .num {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 48rpx;
        color: #fe615a;
        line-height: 48rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        .unit {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #fe615a;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-left: 8rpx;
        }
      }
    }
    // .plan-button {
    //   background: #3072f6;
    //   padding: 0 18rpx;
    //   height: 64rpx;
    //   line-height: 64rpx;
    //   .plan-button-text {
    //     font-family: PingFang SC, PingFang SC;
    //     font-weight: 400;
    //     font-size: 28rpx;
    //     color: #ffffff;
    //     text-align: left;
    //     font-style: normal;
    //     text-transform: none;
    //   }
    // }
  }
  .plan-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 64rpx;
    background: #f3f7ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 2rpx solid #3072f6;
    padding: 18rpx 0;
    .plan-button-text {
      font-size: 28rpx;
      font-weight: 400;
      color: #3072f6;
      margin-left: 18rpx;
    }
  }
  :deep(.uni-modal) {
    margin-top: -16rpx;
    width: 702rpx;
    padding: 32rpx 32rpx 0 32rpx;
    background: #ffffff;
    border-radius: 16rpx;
    position: relative;

    .uni-modal__hd {
      font-size: 34rpx;
      font-weight: 500;
      color: #1d2129;
      padding: 0 0;
      margin-bottom: 24rpx;
    }

    .uni-modal__bd {
      font-size: 32rpx;
      font-weight: 400;
      color: #191c27;
      padding: 0 0;
      padding-bottom: 24rpx;
    }

    .uni-modal__ft {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 108rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #191c27;
      margin: 0 -32rpx;
    }
  }

  .ve-form-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88rpx;
    background: #f3f7ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 2rpx solid #3072f6;
    margin-bottom: 32rpx;
    .ve-form-item-btn-text {
      font-size: 30rpx;
      font-weight: 400;
      color: #3072f6;
      margin-left: 18rpx;
    }
  }
  .ve-form-item-btn-have-data {
    margin-top: 32rpx;
  }
  .radio_class {
    :deep(.radio-item) {
      margin-left: 20rpx !important;
    }
    :deep(.radio-item:first-child) {
      margin-left: 0 !important;
    }
    :deep(.radio-label) {
      margin-left: 8rpx !important;
      font-size: 24rpx !important;
    }
    :deep(.inner-circle) {
      width: 12rpx;
      height: 12rpx;
    }
  }
  .inspection-wrapper {
    /deep/ .ve-card-header {
      background: #f0f1f3;
    }
    /deep/ .ve-card-content {
      background-color: #f7f8fa;
      .insure-detail-item-title {
        background-color: #e6e8eb;
      }
      .insure-detail-item-content {
        background-color: #eff0f1;
      }
    }
  }
</style>
